<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>life times</title>
  <script src="/vue.js"></script>
</head>
<body>
  <div id="root">
    {{title}}
  </div>
  <script>
    var vm = new Vue({
      data: {
        title: 'hello'
      },
      methods: {
        doSomething() {
          console.log('do something')
        },

        loadData() {
          // ajax
          fetch('http://localhost:8080/api/movies/list')
            .then(response => response.json())
            .then(result => {
              console.log(result)
            })
        }
      },

      beforeCreate() {
        console.log('beforeCreate')

        // this.doSomething()

        // console.log(this) // 可以
        // console.log(this.title) // 不可以

        // console.log(document.querySelector('#root').innerHTML)

        // // 使用场景，给this绑定变量
        // this.selftitle = 'world'
      },

      created() {
        console.log('created')
        // this.loadData()

        // console.log(this) // 可以
        // console.log(this.title) // 可以
        // console.log(document.querySelector('#root').innerHTML)

        // // 使用场景，修改data里的数据的机会
        // this.title = 'world'
      },

      beforeMount() {
        console.log('beforeMount')

        // console.log(this) // 可以
        // console.log(this.title) // 可以
        // console.log(document.querySelector('#root').innerHTML)

        // // 使用场景，修改data里的数据的机会
        // this.title = 'world'
      },

      // 在初次页面渲染完毕后自动调用
      mounted() {
        console.log('mounted')

        // this.loadData()

        // console.log(this) // 可以
        // console.log(this.title) // 可以
        // console.log(document.querySelector('#root').innerHTML) // 渲染完毕DOM

        // 第1次修改
        // setTimeout(() => {
        //   this.title = 'world'
        // }, 2000)
      },

      render() {
        console.log('render')
      },

      beforeUpdate() {
        console.log('beforeUpdate')

        // console.log(document.querySelector('#root').innerHTML)
        // this.title = new Date().getTime()// 非常不建议
      },

      updated() {
        console.log('updated')

        // console.log(document.querySelector('#root').innerHTML)

        // 第2次修改
        // setTimeout(() => {
        //   this.title = new Date().getTime()
        // }, 1000)
        // this.title = '你好' // 非常不建议

        // 使用场景, 非修改data的事情
        // this.doSomething()

      },

      beforeDestroy() {
        console.log('beforeDestroy')
      },

      destroyed() {
        console.log('destroyed')
      },

    })

    vm.$mount('#root')

    // vm.$destroy()
  </script>
</body>
</html>